<template>
    <div class="portFluxBox">
        <el-row class="linePage-box">
            <el-col :span="24">
                <vPortFluxBar></vPortFluxBar>
            </el-col>
        </el-row>
        <el-row class="table-box">
            <el-col :span="24">
                <el-row :gutter="0" class="tableTitle">
                    <el-col :span="24">
                        <span class="titleText">端口流量统计</span>
                    </el-col>
                </el-row>
                <el-row :gutter="0" class="tableData-box">
                    <el-col :span="24">
                        <el-table
                            :header-cell-style="{
                                'background':'rgb(2, 16, 51)',
                                'border-bottom': 'none',
                                'box-shadow': '0px 0px 30px  rgb(1, 40, 107) inset',
                                'text-align': 'center',
                                'color': 'aliceblue' }"
                            :cell-style="{
                                'background':'rgba(2, 16, 51, 0)',
                                'border-top': '1px solid rgba(4, 44, 119, 0.5)',
                                'border-bottom': 'none',
                                'text-align': 'center',
                                'color': 'aliceblue' }"
                            :data="tableData"
                            height="100%"
                            style="width: 100%; font-size: medium">
                                <template v-for="(item) in tableColumns">
                                <el-table-column
                                    :prop="item.prop"
                                    :label="item.label"
                                    align="center"
                                    :width="item.width"
                                    :key="item.prop">
                                </el-table-column>
                            </template>
                        </el-table>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { fetchData2 } from '@/api/index.js';
import bus from 'common/bus.js';
import vPortFluxBar from './PortFluxBar.vue';
import tableColumns from './PortFluxTableColumns.js';

export default {
    components: {
        vPortFluxBar
    },
    data() {
        return {
            postData: {
                opera: 'OSNetworkIfSpeed',
                curPage: 1,
                pageSize: 10,
                sort: {
                    sortColumn: 'rtx_kbyte',
                    sortOrders: 'desc'
                },
                filtersType: 'fuzzyquery',
                filters: {
                    "monid": "",
                },
            },
            tableData: [],
            tableColumns: tableColumns,
            selectedMonID: '',
            timerName: 'PortFlux',
            timerEventName: 'timerPortFlux',
            timerInterval: 1000 * 30
        }
    },
    created() {
		console.log(tableColumns)
        bus.$on('selectedNetMonID', msg => {
            // 获取数据
            this.selectedMonID = msg;
            this.postData.filters.monid = this.selectedMonID.selectedNETMonID;
            this.getData();
        });

        bus.$emit('timerNewTodo', {
            name: this.timerName,
            eventName: this.timerEventName,
            interval: this.timerInterval,
            intervalNow: 0
        });

        bus.$on(this.timerEventName, msg => {
            if (msg.isGetData) {
                this.getData();
            }
        });
    },
    mounted() {

    },
    computed: {
        
    },
    methods: {
        getData(){
            fetchData2({
                hid:this.$route.query.MONID
            }).then((res) => {
				console.log("zz",res)
                if (res.length == 0) {
                    this.tableData = [];
                } else {
					this.tableData = res.splice(0,10)
					console.log(this.tableData)
                }
            });
        },
    },
    beforeDestroy() {
        bus.$emit('timerNewTodo', {
            name: this.timerName
        });      
        
    },
    watch:{
        
    }
}
</script>

<style scoped>
.portFluxBox {
    height: calc(100% - 22px - 8px);
}
.linePage-box {
    height: 30%;
    margin-bottom: 10px;
}
.linePage-box .el-col {
    height: 100%;
}

.table-box {
    height: calc(70% - 10px);
    /* border-top: 1px solid rgba(4, 44, 119, 0.5); */
}
.table-box > .el-col {
    height: 100%;
}
.table-box .tableTitle{
    height: 30px;
    text-align: center;
    line-height: 30px;
}
.table-box .tableTitle .titleText {
    display: block;
    width: 60%;
    margin: 0 auto 8px auto;
    border-radius: 20px;
    box-shadow: 0px 0px 20px rgb(1, 40, 107) inset !important;
    line-height: 22px;
}
.table-box .tableData-box{
    height: calc(100% - 30px);
}
.tableData-box > .el-col {
    height: 100%;
}
/* 滚动条 */
.tableData-box >>> .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.tableData-box >>> .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: rgba(4, 44, 119, 0.7);
}
.tableData-box >>> .el-table th.gutter {
    display: none;
}
.tableData-box>>> .el-table tr{
    background-color: rgba(1, 40, 107, 0) !important;
}
.tableData-box>>> .el-table{
    background: rgba(2, 16, 51, 0);
}
.el-table__row > td{
	border: none;
}
.el-table::before {
	height: 0px;
}

</style>